<template>
  <div class="index_jingdian">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div
        class="item"
        v-for="(item,index) in datalist"
        :key="index"
        @click="MovieDetail(item.movieId)"
      >
        <div class="item-img">
          <img :src="item.poster" alt />
        </div>
        <div class="movie-info">
          <div class="title line-ellipsis">{{item.movieInfo.title}}</div>
          <div class="english-title line-ellipsis">{{item.movieInfo.englishTitle}}</div>
          <div class="actors line-ellipsis">{{item.movieInfo.actors}}</div>
          <div class="show-info line-ellipsis">{{item.movieInfo.showInfo}}</div>
        </div>
        <div class="r">
          <span class="sc" :v-if="item.score">{{item.score}}</span>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
export default {
  name: "index_jingdian",
  data() {
    return {
      datalist: [],
      loading: false,
      finished: false,
      current: 1
    };
  },
  created() {
    // this.stopTouchendPropagationAfterScroll()
  },
  methods: {
    stopTouchendPropagationAfterScroll() {
      var locked = false;

      window.addEventListener(
        "touchmove",
        function(ev) {
          locked ||
            ((locked = true),
            window.addEventListener("touchend", stopTouchendPropagation, true));
        },
        true
      );
      function stopTouchendPropagation(ev) {
        ev.stopPropagation();
        window.removeEventListener("touchend", stopTouchendPropagation, true);
        locked = false;
      }
    },
    MovieDetail(MovieId) {
      this.$router.push({ name: "Detail", params: { MovieId } });
    },
    onLoad() {
      this.current += 10;
      this.axios({
        method: "get",
        url: "index/moreClassicList",
        params: {
          sortId: 1,
          showType: 3,
          limit: 10,
          offset: this.current
        }
      }).then(ref => {
        this.datalist.push(...ref.data);
        this.loading = false;
      });
    },
    
  }
};
</script>
<style lang="less" scoped>
.item {
  padding: 10px;
  background-color: #fff;
  margin-top: 5px;
  display: flex;
  align-items: center;
  position: relative;
  .item-img {
    margin-left: 20px;
    img {
      width: 66px;
      height: 94px;
    }
  }
  .movie-info {
    color: rgb(119, 119, 119);
    line-height: 22px;
    margin: 0 60px 0 15px;
    .title {
      font-size: 0.34rem;
      line-height: 0.48rem;
      margin-bottom: 6px;
      color: #333;
      font-weight: 700;
    }
  }
  .r {
    position: absolute;
    right: 10px;
    top: 15px;
    .sc {
      color: #faaf00;
      font-size: 20px;
    }
  }
}
</style>